import React, {useState, useEffect} from 'react';
import {Form, Input, Button, message, Image} from 'antd';
import {useDispatch} from 'react-redux';
import {useNavigate} from 'react-router-dom';
import {loginAction} from '../../redux/loginStore/actions';
import {UserOutlined, LockOutlined} from '@ant-design/icons';
import './index.css';
import axios from '../../http/axios';

const Login = (props) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [form] = Form.useForm();
  const [avaHeight, setAvaHeight] = useState(0);
  const [captchadata, setCaptcha] = useState('error');

  //登录
  const onFinish = (values) => {
    console.log(values);
    axios({
      method: 'POST',
      url: '/enterprise/login',
      data: {
        loginName: values.username,
        password: values.password,
        captcha: values.yzcode,
      },
    })
      .then((res) => {
        message.success('登陆成功');
        console.log(res);
        // sessionStorage.setItem('initState', JSON.stringify(res.data));
        sessionStorage.setItem('token', JSON.stringify(res.data));
        dispatch(
          loginAction({
            login: true,
          })
        ).then(navigate('/'));
      })
      .catch((err) => {
        form.resetFields(); // 重置
      });
    // 假的
    // sessionStorage.setItem("initState", JSON.stringify(moke));
    // sessionStorage.setItem("token", JSON.stringify(moke.token));
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  // 初始化获取当前屏幕可用高度
  useEffect(() => {
    const h = window.innerHeight;
    setAvaHeight(h);
    window.onresize = function () {
      const h = window.innerHeight;
      setAvaHeight(h);
    };
    setCaptcha('http://175.24.207.44:7003/getCaptcha');
  }, []);

  return (
    <div
      className="bg"
      style={{
        width: 'auto',
        height: avaHeight,
      }}
    >
      <div className="henfu" style={{top: avaHeight / 2 - 190}}>
        <div className="text-box">
          <div className="txt">
            <h1 className="txt-big">朴院梨花溪民宿酒店</h1>
            <h3 className="txt-small">
              Houshan Puyuan hotel management system
            </h3>
          </div>
        </div>
        <Form
          form={form}
          id="login-form"
          name="normal_login"
          className="login-form"
          initialValues={{
            username: 'puyuanlihuaxi',
            password: '123456',
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: '请输入账号!',
              },
            ]}
          >
            <Input
              size="large"
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入账号"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码',
              },
            ]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              size="large"
              placeholder="请输入密码"
            />
          </Form.Item>

          <Form.Item className="input-forget">
            <Form.Item
              name="yzcode"
              rules={[
                {
                  required: true,
                  message: '请输入验证码',
                },
              ]}
            >
              <Input
                placeholder="请输入验证码"
                size="large"
                style={{marginRight: '15px'}}
                bordered
              />
            </Form.Item>
            <Image
              onClick={() => {
                setCaptcha('http://175.24.207.44:7002/getCaptcha?='+1+Math.random());
              }}
              width={120}
              height={39}
              src={captchadata}
              preview={false}
              fallback=""
            />
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
              style={{backgroundColor: '#9B9AA0', border: 'none'}}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Login;
